<template>
	<view class="index-page box relative bg-primary" scroll-y="true" :style="statusBarHeightStyle">
		<view class="header-wrap">
			<image class="header-img"
				src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032313595dc6c6049.png"
				mode="aspectFill"></image>
			<view class="custom-navbar">
				<!-- <view class="flex align-center" style="padding-top: 10rpx;" @click="handleChangeDevice">
					<image class="check-icon" src="/static/img/check.png" mode="aspectFill"></image>
					<text class="device-title">{{ shebei_xinxi.jiancheng || "" }}</text>
				</view> -->
				<image mode="aspectFill" src="/static/icon/chevron-_left_white.png" class="back-icon"></image>
				<text class="header-title">设备信息</text>
			</view>
			<view class="user-info">
				<view class="user-avatar">
					<image mode="aspectFill" :src="logo"></image>
				</view>
				<view class="user-details">
					<view class="user-name">张三丰</view>
					<view class="day-wrap">
						<image
							src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032339179015f5108.png"
							mode="aspectFill" class="duo-icon"></image>
						<text>已服务：188天</text>
					</view>
				</view>
				<!-- <view class="edit-btn" @click="handleChangeName">
					<text>修改名称</text>
				</view> -->
			</view>
			<view class="card-wrap">
				<view class="card-mask">
					<image mode="aspectFill"
						src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032320414389d6149.png">
					</image>
				</view>
				<view class="card-item">
					<view class="item-top">
						<text class="item-number">{{ shebei_xinxi.before_shuizhi || "" }}</text>
						<text class="item-unit">ppm</text>
						<image @click="handleShowWarning" src="/static/img/question_icon.png" mode="aspectFill"
							class="querstion-icon"></image>
					</view>
					<view class="item-bottom">
						<text class="item-title">净化前水质</text>
						<text class="item-tag">{{ shebei_xinxi.before_shuizhi_zhiliang || "" }}</text>
					</view>
				</view>
				<view class="card-item">
					<view class="item-top">
						<text class="item-number">{{ shebei_xinxi.after_shuizhi || "" }}</text>
						<text class="item-unit">ppm</text>
						<image @click="handleShowWarning" src="/static/img/question_icon.png" mode="aspectFill"
							class="querstion-icon"></image>
					</view>
					<view class="item-bottom">
						<text class="item-title">净化后水质</text>
						<text class="item-tag">{{ shebei_xinxi.after_shuizhi_zhiliang || "" }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="banner-wrap">
			<view class="banner-line">
				<view class="banner-item" @click="handleToUrl('/pages/recharge/index')">
					<image src="/static/icon/icon_1.png" mode="aspectFill"></image>
					<text class="banner-title">充值</text>
				</view>
				<view class="banner-item">
					<image src="/static/icon/icon_2.png" mode="aspectFill"></image>
					<text class="banner-title">推荐有礼</text>
				</view>
				<view class="banner-item" @click="handleControl">
					<image src="/static/icon/icon_3.png" mode="aspectFill"></image>
					<text class="banner-title">远程控制</text>
				</view>
				<view class="banner-item" @click="handleToUrl('/pages/mine/service?type=service')">
					<image src="/static/icon/icon_4.png" mode="aspectFill"></image>
					<text class="banner-title">用户协议</text>
				</view>
			</view>
			<view class="banner-line active">
				<view class="banner-item" @click="handleToUrl('/pages/warranty/index')">
					<image src="/static/icon/icon_5.png" mode="aspectFill"></image>
					<text class="banner-title">报修</text>
				</view>
				<view class="banner-item">
					<image src="/static/icon/icon_6.png" mode="aspectFill"></image>
					<text class="banner-title">滤芯更换</text>
				</view>
				<view class="banner-item" @click="handleUnBind">
					<image src="/static/icon/icon_7.png" mode="aspectFill"></image>
					<text class="banner-title">自助解绑</text>
				</view>
				<view class="banner-item">
					<image src="/static/icon/icon_8.png" mode="aspectFill"></image>
					<text class="banner-title">专属客服</text>
				</view>
			</view>
		</view>
		<view class="status-wrap">
			<view class="status-header">
				<text class="status-text">{{ shebei.xinghao || "" }}</text>
				<text class="status-text">状态：{{ shebei.status_text || "" }}</text>
				<view class="xin-hao">
					<image src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/2025080323365429e170048.png"
						mode="aspectFill"></image>
					<text>4G已连接</text>
				</view>
			</view>
			<view class="number-box">
				<view class="number-item">
					<text class="num-text">{{ shebei.bianma || "" }}</text>
					<text class="num-label">设备编码</text>
				</view>
				<view class="number-item">
					<text class="num-text">{{ shebei_xinxi.shengyu_rongliang || 0 }}L</text>
					<text class="num-label">剩余量</text>
				</view>
				<view class="number-item">
					<text class="num-text">{{ shebei_xinxi.shengyu_day_num || 0 }}天</text>
					<text class="num-label">有效期剩余</text>
				</view>
			</view>
			<view class="chart-box">
				<view class="left-chart">
					<view class="circle-chart">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="shengYuChart" />
					</view>
					<view class="chart-title">当前套餐余量</view>
				</view>
				<view class="right-package">
					<view class="package-icon"></view>
					<view class="package-btn" @click="handleToUrl('/pages/recharge/index')">点击查看</view>
				</view>
			</view>
		</view>
		<view class="data-detail-box">
			<view class="com-line-header">
				<view class="water-icon">
					<image src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032336139a2332391.png"
						mode="aspectFill"></image>
				</view>
				<view class="life-desc">
					<view class="desc-top">
						<text class="desc-line"></text>
						<text class="desc-title">制水量</text>
						<image mode="aspectFill" class="desc-remark-icon"></image>
					</view>
					<view class="desc-text" @click="handleToHistory">
						<text>点击查看历史制水情况>></text>
					</view>
				</view>
				<view class="data-block">
					<image src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032323511044a0591.png"
						mode="aspectFill" class="block-icon"></image>
					<view class="block-data-item is-left">
						<text class="data-item-label">昨日</text>
						<text class="data-item-value">{{ yesterday_zhishui_rongliang || 0 }}L</text>
					</view>
					<view class="block-data-item is-right">
						<text class="data-item-label">昨日</text>
						<text class="data-item-value">{{ today_zhishui_rongliang || 0 }}L</text>
					</view>
				</view>
			</view>
			<view class="data-detail-chart">
				<qiun-data-charts :ontouch="true" type="column" :opts="kongShuiChartOption"
					:chartData="kongShuiChartData" />
			</view>
			<view class="data-detail-footer">
				<image src="/static/img/left_icon.png" class="icon-box" mode="aspectFill"></image>
				<view class="date-select">
					<text>2025-06-18</text>
				</view>
				<image src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/20250803234109a4d0a1352.png"
					class="icon-box" mode="aspectFill"></image>
			</view>
		</view>
		<view class="life-wrap">
			<view class="com-line-header">
				<view class="water-icon">
					<image src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/20250803233513246e32991.png"
						mode="aspectFill"></image>
				</view>
				<view class="life-desc">
					<view class="desc-top">
						<text class="desc-line"></text>
						<text class="desc-title">滤芯寿命</text>
						<image mode="aspectFill" class="desc-remark-icon"></image>
					</view>
					<view class="desc-text">
						<text>滤芯寿命按照用水量和使用时间来综合计算</text>
					</view>
				</view>
				<view class="refresh-btn">
					<image src="/static/img/refresh-icon.png" mode="aspectFill" class="refresh-icon"></image>
					<text class="refresh-text">刷新</text>
				</view>
			</view>
			<view class="life-chart-box">
				<view class="line-chart-item">
					<view class="circle-chart">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
					</view>
					<view class="chart-title">PP棉</view>
				</view>
				<view class="line-chart-item">
					<view class="circle-chart">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
					</view>
					<view class="chart-title">PP棉</view>
				</view>
				<view class="line-chart-item">
					<view class="circle-chart">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
					</view>
					<view class="chart-title">PP棉</view>
				</view>
				<view class="line-chart-item">
					<view class="circle-chart">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
					</view>
					<view class="chart-title">PP棉</view>
				</view>
			</view>
		</view>
		<view class="empty-block"></view>
		<check-device ref="changeDeviceRef" @change="handleChangeDeviceSuccess" />
		<warning-popup ref="warningRef" />
		<control-popup ref="controlRef" />
		<cancel-bind ref="cancelBind" />
		<change-name ref="changeNameRef" @success="handleChangeDeviceSuccess" />
	</view>
</template>

<script>
	import mixin from "@/mixins/mixin.js"
	import { arcbarOption, getColumnOpts } from "./chart.js"
	import CheckDevice from "@/pages/index/com/checkDevice.vue"
	import WarningPopup from "@/pages/index/com/warning-popup.vue"
	import ControlPopup from "@/pages/index/com/control-popup.vue"
	import CancelBind from "@/pages/index/com/cancel-bind.vue"
	import { request, showLoading, formatDate } from "@/utils/tool.js"
	import currency from "currency.js"
	import { mapState } from "vuex"
	import ChangeName from "@/pages/index/com/changeName.vue"
	export default {
		mixins: [mixin],
		components: { CheckDevice, WarningPopup, ControlPopup, CancelBind, ChangeName },
		computed: {
			...mapState(["activeDeviceId"])
		},
		data() {
			return {
				chartData: {},
				opts: arcbarOption,
				columnChartData: {},
				shebei_xinxi: {
					"shengyu_day_num": 0, //有效期剩余天数
					"before_shuizhi_zhiliang": "", //净化前水质文案
					"after_shuizhi_zhiliang": "", //净化后水质文案
					"shebei_id": 1, //设备ID
					"rongliang": "", //总量（L）
					"shengyu_rongliang": "", //剩余量（L）
					"before_shuizhi": "", //净化前水质数值
					"after_shuizhi": "", //净化后水质数值
				},
				shebei: {
					"bianma": "",
					"xinghao": "",
					"leixing": "",
					"status_text": ""
				},
				taocan_num: 0,
				logo: "",
				shengYuChart: {},
				today_zhishui_rongliang: 0,
				yesterday_zhishui_rongliang: 0,
				kongShuiChartData: [],
				kongShuiChartOption: getColumnOpts(),
			}
		},
		created() {
			this.initData()
			this.getKongShuiLiang()
			console.log(this.activeDeviceId, 'activeDeviceId');
		},
		onReady() {
			this.getColumnData()
		},
		methods: {
			handleChangeName() {
				const { shebei_id, jiancheng } = this.shebei_xinxi
				if (!shebei_id) return
				this.$refs.changeNameRef.open(shebei_id, jiancheng)
			},
			handleChangeDeviceSuccess() {
				this.initData()
				this.getKongShuiLiang()
			},
			handleChangeDevice() {
				this.$refs.changeDeviceRef.open(this.activeDeviceId)
			},
			handleShowWarning() {
				this.$refs.warningRef.open()
			},
			handleToHistory() {
				uni.navigateTo({
					url: "/pages/chart-detail/index"
				})
			},
			handleConfirmUnBind() {
				console.log('confirmUnBind');
			},
			handleToUrl(url) {
				uni.navigateTo({
					url
				})
			},
			handleControl() {
				this.$refs.controlRef.open()
			},
			// 自助解绑
			handleUnBind() {
				this.$refs.cancelBind.open(this.activeDeviceId)
			},
			async getKongShuiLiang() {
				const resp = await request({
					url: "/shebei/zhishuiliang",
					method: "GET",
					data: {
						shebei_id: this.activeDeviceId
					}
				})
				const data = resp.data
				const { today_zhishui_rongliang, yesterday_zhishui_rongliang, zhishui_list } = data
				this.today_zhishui_rongliang = today_zhishui_rongliang
				this.yesterday_zhishui_rongliang = yesterday_zhishui_rongliang
				const categories = [],
					list = [];

				(zhishui_list || []).forEach(item => {
					const { zhishui_rongliang, create_time } = item
					categories.push(formatDate(create_time, "HH:mm"))
					list.push(Number(zhishui_rongliang))
				})
				this.kongShuiChartData = {
					categories,
					series: [{
						name: "单次制水量",
						data: list,
						unit: 'L',
						gridType: 'dash'
					}]
				}
				console.log(resp, '恐水了');
			},
			async initData() {
				const hide = showLoading("正在获取")
				const resp = await request({
					url: "/index/index",
					method: "GET",
					data: {
						shebei_id: this.activeDeviceId
					}
				}).catch(hide)
				const data = resp.data
				if (data) {
					const { logo, taocan_num, shebei, shebei_xinxi } = data
					this.logo = logo || ""
					this.taocan_num = taocan_num || 0
					this.shebei = shebei || {}
					this.shebei_xinxi = shebei_xinxi || {}
					this.getSurplusWater(shebei_xinxi)
				}
				hide()
			},
			getColumnData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026"],
						series: [{
							name: "单次制水量",
							data: [35, 36, 31, 33, 13, 34, 20, 18, 20],
							unit: 'L',
							gridType: 'dash'
						}]
					};
					this.columnChartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getSurplusWater(data) {
				let { rongliang, shengyu_rongliang } = (data || {})
				if (!rongliang) rongliang = 0
				if (!shengyu_rongliang) shengyu_rongliang = 0
				let value = 0
				if (rongliang > 0) {
					value = currency(shengyu_rongliang).divide(rongliang).value
				}
				this.opts.title.name = currency(value).multiply(100).value + '%'
				this.shengYuChart = {
					series: [{
						name: "",
						color: "#3361F0",
						data: value
					}]
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: unset;
	}

	.index-page {
		.empty-block {
			height: 50rpx;
		}

		.com-line-header {
			display: flex;
			align-items: center;

			.data-block {
				height: 118rpx;
				width: 220rpx;
				margin-left: auto;
				position: relative;

				.block-data-item {
					display: flex;
					flex-flow: column;
					align-items: center;
					justify-content: center;
					position: absolute;
					color: #2A3E68;
					top: 20rpx;

					&.is-left {
						left: 32rpx;
					}

					&.is-right {
						right: 32rpx;
						color: #fff;
					}

					.data-item-label {
						font-size: 22rpx;
						line-height: 34rpx;
					}

					.data-item-value {
						font-weight: bold;
						font-size: 26rpx;
						line-height: 44rpx;
					}
				}

				.block-icon {
					width: 100%;
					height: 100%;
				}
			}

			.refresh-btn {
				margin-left: auto;
				display: flex;
				flex-flow: column;
				align-items: center;

				.refresh-icon {
					width: 38rpx;
					height: 38rpx;
				}

				.refresh-text {
					height: 28rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #2A3E68;
					margin-top: 4rpx;
				}
			}

			.life-desc {
				margin-left: 20rpx;

				.desc-text {
					font-weight: 400;
					font-size: 24rpx;
					color: #2A3E68;
					margin-top: 6rpx;
				}

				.desc-top {
					display: flex;
					align-items: center;

					.desc-line {
						width: 8rpx;
						height: 25rpx;
						background: #3361F0;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}

					.desc-remark-icon {
						margin-left: 10rpx;
						width: 24rpx;
						height: 24rpx;
					}

					.desc-title {
						font-weight: 400;
						font-size: 26rpx;
						color: #2A3E68;
						margin-left: 10rpx;
					}
				}
			}

			.water-icon {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
				}

			}
		}

		.data-detail-box {
			margin: 24rpx 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 24rpx;

			.data-detail-chart {
				height: 450rpx;
				width: 100%;
				margin-top: 20rpx;
			}

			.data-detail-footer {
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				justify-content: center;

				.date-select {
					width: 188rpx;
					height: 28rpx;
					font-size: 24rpx;
					color: #2A3E68;
					text-align: center;
					margin: 0 48rpx;
				}

				.icon-box {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		.life-wrap {
			margin: 24rpx 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 24rpx;

			.life-chart-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.line-chart-item {
					display: flex;
					flex-flow: column;
					align-items: center;

					.circle-chart {
						width: 130rpx;
						height: 130rpx;
					}

					.chart-title {
						height: 34rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #2A3E68;
					}
				}
			}


		}


		.status-wrap {
			margin: 24rpx 32rpx 0;
			width: 682rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;
			position: relative;

			.chart-box {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 4rpx 120rpx 24rpx;

				.right-package {
					display: flex;
					flex-flow: column;
					align-items: center;

					.package-icon {
						width: 110rpx;
						height: 110rpx;
						background: #0565FF;
						background: linear-gradient(180deg, #369FE5 0%, #5C2EC6 100%);
						border-radius: 32rpx 32rpx 32rpx 32rpx;
					}

					.package-btn {
						width: 128rpx;
						height: 40rpx;
						background: #3361F0;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 40rpx;
						margin-top: 20rpx;
					}
				}

				.left-chart {
					display: flex;
					flex-flow: column;
					align-items: center;

					.circle-chart {
						width: 130rpx;
						height: 130rpx;
					}

					.chart-title {
						font-weight: 400;
						font-size: 24rpx;
						color: #2A3E68;
						line-height: 40rpx;
					}
				}
			}

			.number-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				padding: 0 48rpx;

				.number-item {
					display: flex;
					flex-flow: column;
					align-items: center;
					flex: 1;

					.num-text {
						font-weight: bold;
						line-height: 56rpx;
						font-size: 40rpx;
						color: #3361F0;
					}

					.num-label {
						line-height: 36rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #2A3E68;
						letter-spacing: 1px;
					}
				}
			}

			.status-header {
				padding: 24rpx 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.xin-hao {
					display: flex;
					align-items: center;

					text {
						font-weight: 400;
						font-size: 20rpx;
						color: #2A3E68;
						letter-spacing: 1px;
						margin-left: 16rpx;
					}

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.status-text {
					font-weight: 400;
					font-size: 26rpx;
					color: #2A3E68;
					letter-spacing: 1px;
					line-height: 36rpx;
				}
			}
		}

		.banner-wrap {
			position: relative;
			box-sizing: border-box;
			padding: 24rpx 32rpx 0;
			margin-top: 140rpx;

			.banner-line {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;

				&.active {
					margin-top: 24rpx;
				}

				.banner-item {
					display: flex;
					flex-flow: column;
					align-items: center;

					.banner-title {
						font-weight: 300;
						font-size: 24rpx;
						color: #1F1F1F;
						margin-top: 12rpx;
					}

					image {
						width: 112rpx;
						height: 112rpx;
					}
				}
			}
		}

		.header-wrap {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			height: 432rpx;
			padding-top: var(--status-height-value);

			.card-wrap {
				position: relative;
				margin: 24rpx 30rpx 0;
				height: 240rpx;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				flex-flow: row nowrap;
				padding: 24rpx 32rpx 0;
				background: #42AFFD;

				.card-mask {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.card-item {
					box-sizing: border-box;
					position: relative;
					flex: 1;
					height: 100%;
					padding-top: 24rpx;
					display: flex;
					flex-flow: column;

					&:last-child {
						align-items: center;
					}

					.item-bottom {
						display: flex;
						align-items: center;
						margin-top: 32rpx;

						.item-title {
							font-weight: 400;
							font-size: 26rpx;
							color: #2A3E68;
							line-height: 36rpx;
						}

						.item-tag {
							margin-left: 16rpx;
							width: 87rpx;
							line-height: 32rpx;
							background: #FFFFFF;
							border-radius: 15rpx 15rpx 15rpx 15rpx;
							color: #3361F0;
							font-size: 26rpx;
							text-align: center;
						}
					}


					.item-top {
						display: flex;
						flex-flow: row nowrap;
						align-items: flex-end;

						.querstion-icon {
							width: 32rpx;
							height: 32rpx;
							margin-left: 10rpx;
						}

						.item-number {
							font-size: 60rpx;
							color: #FFFFFF;
							letter-spacing: 2px;
							font-weight: bold;
						}

						.item-unit {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 36rpx;
							margin-left: 4rpx;
						}
					}
				}
			}

			.user-info {
				margin-top: 12rpx;
				padding: 0 34rpx;
				display: flex;
				align-items: center;
				width: 100%;
				box-sizing: border-box;
				position: relative;

				.edit-btn {
					margin-left: auto;
					padding: 8rpx 20rpx;
					font-size: 26rpx;
					color: #0565FF;
					letter-spacing: 1px;
					line-height: 30rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.user-details {
					margin-left: 20rpx;
					color: #fff;

					.day-wrap {
						margin-top: 8rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						display: flex;
						align-items: center;

						.duo-icon {
							width: 24rpx;
							height: 24rpx;
							margin-right: 12rpx;
						}
					}

					.user-name {
						font-size: 30rpx;
					}
				}

				.user-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					background: #fff;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.custom-navbar {
				display: flex;
				align-items: center;
				height: 88rpx;
				position: relative;
				padding: 0 36rpx;
				box-sizing: border-box;

				.back-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.check-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.device-title {
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.header-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.header-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
</style>